$(function () {
    // 在同一个页面处理新增和编辑两个逻辑，需要判断，当前的操作到底是新增还是编辑
    // 如果是编辑，是带有id过来的
    // 判断url里面是否带有参数id
    // location.search不是空字符串,name就是编辑操作
    if (location.search) { 
        getCategory(getPostById);
        // 编辑的第一步操作：根据id，把药编辑的文章的数据从服务端获取，展示给用户
    } else { 
        // 新增 ---使用过富文本插件
        CKEDITOR.replace("content");//使用富文本插件CKEDITOR

        // 获取分类
        getCategory();
    }
    
    // 加载所有的分类
    function getCategory(callback) {
        $.ajax({
            type: 'post',
            url: '/admin/api/getAllCategories.php',
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    // 渲染分页下拉结构
                    // 如果是不根据条件，value就是all
                    var html = '<option value="all">所有分类</option>';
                    for (var i = 0; i < res.data.length; i++) {
                        html += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>';
                    }
                    // 把字符串变成结构
                    $('#category').html(html);
                    // 调用函数
                    callback && callback();
                }
            }
        });
    }

    // 编辑的时候，根据id获取数据
    function getPostById() {
        // 1.先得到id ?id=1000
        var id = location.search.substring(1).split("=")[1];
        // 2.根据id把数据请求回来
        $.ajax({
            type: 'post',
            url: '/admin/api/getPostById.php',
            data: {id:id},
            dataType: 'json',
            success: function (res) { 
                console.log("返回数据：" + res);
                if (res.code == 1) { 
                    // 生成一个存储id的隐藏域，放到表单里面，在保存的时候，把数据带回服务端
                    $('#form').prepend($("<input type='hidden' name='id' value='" + id + "'>"));
                    // 把数据渲染到每一个输入框里面
                    $('#title').val(res.data.title);
                    $('#content').val(res.data.content);
                    $('#slug').val(res.data.slug);

                    // 把图片数据存储到隐藏域里面
                    $('#feature-url').val(res.data.feature);
                    // 把图片显示出来
                    $('.thumbnail').show().attr('src', res.data.feature);

                    $('#category').val(res.data.category_id);

                    // 因为这个时间控件跟数据库的时间状态不太一样，需要处理一下
                    $('#created').val(res.data.created.replace(" ", "T"));
                    $('#status').val(res.data.status);


                    // 把数据都加载完毕之后，把编辑内容的文本域变成富文本
                    CKEDITOR.replace("content");
                }
            }
        });
    }
    

    // 先完成图片的上传
    // change事件  在input表单元素的value产生改变的时候触发
    // 当我的图片按钮被点击时
    $('#feature').on('change', function () {
        // 获取到选中的文件
        var file = this.files[0];
        // 把这个文件提交到服务器
        // ajax需要借助一个对象才能把文件带回服务器
        // formdata对象：
        // 用法：1、new 一个对象
        // 2、把数据添加到对象里面
        // 3、把这个对象交给ajax对象发送回服务器
        var fd = new FormData();
        // 把数据添加到对象里面
        fd.append('pic', file);
        // 使用jq的ajax上传
        // 如果使用jq配合formData进行文件上传，需要给ajax设置两个属性
        $.ajax({
            type: "post",
            url: "/admin/api/uploadFile.php",
            data: fd,
            dataType: "json",
            // 因为jq里面会自动的对数据进行一定的处理再提交
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
                if (res.code == 1) { 
                    // 把预览的图片显示出来
                    $('.thumbnail').show().attr('src', res.data);
                    // 上传成功之后，在手机数据的时候还需要一个封面图片的路径
                    // 把这个路径放到一个隐藏域里面
                    $('#feature-url').val(res.data);
                }
            }
        });
    });

    


    // 点击保存按钮
    $('#save').on('click', function () {
    //    使用了富文本插件，所有的内容都是在富文本插件里面的，在表单的文本域里面是没有内容的，需要在点击的时候，把富文本插件里面的内容，同步到文本域，才能在获取的时候，获取到。。。
    // 同步的步骤：调用同步的方法
    // CKEDITOR.instances之前替换的时候的元素的id.updateElement();
        CKEDITOR.instances.content.updateElement();

        // 收集数据
        var data = $('#form').serialize();

        // 点击保存的时候，需要判断到底是新增还是编辑
        if (!location.search) {
            // 把数据发送回服务端
            $.ajax({
                type: 'post',
                url: '/admin/api/addNewPost.php',
                data: data,
                dataType: 'json',
                success: function (res) {
                    alert(res.msg);
                    location.replace('posts.php');
                }
            });
        } else { 
            // 把数据发送到另一个接口,上传的功能
            $.ajax({
                type: 'post',
                url: '/admin/api/updatePostByIdp.php',
                data: data,
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if (res.code==1) {
                        alert(res.msg);
                        // 看具体需要，之后要干嘛，有可能是会跳转回列表，也可能留在当前继续编辑
                        location.replace('posts.php');
                    }
                }
            });
        }
    });
});